import React from 'react';

interface EditorToolbarProps {
  isPreviewMode: boolean;
  onTogglePreview: () => void;
  onBold: (text: string) => void;
  onItalic: (text: string) => void;
  onLink: (text: string) => void;
  onImage: (text: string) => void;
  onCode: (text: string) => void;
}

const EditorToolbar: React.FC<EditorToolbarProps> = ({
  isPreviewMode,
  onTogglePreview,
  onBold,
  onItalic,
  onLink,
  onImage,
  onCode
}) => {
  const toolbarItems = [
    {
      name: 'Bold',
      icon: 'B',
      action: () => onBold('**bold text**'),
      shortcut: '⌘B'
    },
    {
      name: 'Italic',
      icon: 'I',
      action: () => onItalic('*italic text*'),
      shortcut: '⌘I'
    },
    {
      name: 'Link',
      icon: '🔗',
      action: () => onLink('[link text](url)'),
      shortcut: '⌘K'
    },
    {
      name: 'Image',
      icon: '🖼️',
      action: () => onImage('![alt text](image-url)'),
      shortcut: '⌘⇧I'
    },
    {
      name: 'Code',
      icon: '</>', 
      action: () => onCode('`code`'),
      shortcut: '⌘E'
    }
  ];

  return (
    <div className="border-b border-ios-gray-200 dark:border-ios-gray-700 bg-white dark:bg-ios-gray-900">
      <div className="max-w-7xl mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            {toolbarItems.map((item) => (
              <button
                key={item.name}
                onClick={item.action}
                className="p-2 rounded-apple-sm text-ios-gray-600 dark:text-ios-gray-400 hover:bg-ios-gray-100 dark:hover:bg-ios-gray-700 hover:text-ios-blue transition-colors"
                title={`${item.name} (${item.shortcut})`}
              >
                <span className="text-sm font-medium">{item.icon}</span>
              </button>
            ))}
            
            <div className="w-px h-6 bg-ios-gray-200 dark:bg-ios-gray-700 mx-2"></div>
            
            <button
              className="p-2 rounded-apple-sm text-ios-gray-600 dark:text-ios-gray-400 hover:bg-ios-gray-100 dark:hover:bg-ios-gray-700 hover:text-ios-blue transition-colors"
              title="Heading 1"
            >
              H1
            </button>
            <button
              className="p-2 rounded-apple-sm text-ios-gray-600 dark:text-ios-gray-400 hover:bg-ios-gray-100 dark:hover:bg-ios-gray-700 hover:text-ios-blue transition-colors"
              title="Heading 2"
            >
              H2
            </button>
            <button
              className="p-2 rounded-apple-sm text-ios-gray-600 dark:text-ios-gray-400 hover:bg-ios-gray-100 dark:hover:bg-ios-gray-700 hover:text-ios-blue transition-colors"
              title="Quote"
            >
              "
            </button>
            <button
              className="p-2 rounded-apple-sm text-ios-gray-600 dark:text-ios-gray-400 hover:bg-ios-gray-100 dark:hover:bg-ios-gray-700 hover:text-ios-blue transition-colors"
              title="List"
            >
              ≡
            </button>
          </div>

          <div className="flex items-center space-x-2">
            <button
              onClick={onTogglePreview}
              className={`px-3 py-1 rounded-apple-sm text-sm font-medium transition-colors ${
                isPreviewMode 
                  ? 'bg-ios-blue text-white' 
                  : 'text-ios-gray-600 dark:text-ios-gray-400 hover:bg-ios-gray-100 dark:hover:bg-ios-gray-700'
              }`}
            >
              {isPreviewMode ? 'Edit' : 'Preview'}
            </button>
            
            <div className="hidden lg:flex items-center space-x-2 text-xs text-ios-gray-500 dark:text-ios-gray-400">
              <span>Split View</span>
              <div className="w-8 h-4 bg-ios-gray-200 dark:bg-ios-gray-700 rounded-full relative">
                <div className="w-3 h-3 bg-ios-blue rounded-full absolute top-0.5 right-0.5 transition-all"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EditorToolbar;